<template>

  <div class="dataOne" ref="dataOne" style="width: 100%; height: 600px">

</div>
</template>

<script>
import * as echarts from 'echarts'
import { paiMingNet } from '@/network/networks'

export default {

  props: {
    pullTime: Array
  },
  data () {
    return {
      kefuArry: [],
      dateM: [],
      zong: []
    }
  },

  mounted () {
    this.getPaiMing()
  },

  methods: {
    initEcharts () {
      const myChart = echarts.init(this.$refs.dataOne)
      const option = {
        title: {
          text: '最近排名趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.kefuArry,
          left: 'center',
          bottom: 0
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '6%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateM
        },
        yAxis: {
          type: 'value'
        },
        series: this.zong
      }
      option && myChart.setOption(option)
    },
    getPaiMing () {
      paiMingNet(this.pullTime).then(res => {
        this.kefuArry = res.data.kefu
        this.dateM = res.data.dateM
        this.zong = res.data.zong
        this.initEcharts()
      })
    }

  },
  watch: {
    pullTime (val) {
      this.getPaiMing()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
